﻿@{
    Layout = null;
}
<!DOCTYPE html>


<meta name="viewport" content="width=device-width" />
<title>show</title>
<link href="~/BootstrapSouce/css/bootstrap.min.css" rel="stylesheet" />
<script src="~/BootstrapSouce/js/jquery.min.js"></script>
<script src="~/BootstrapSouce/js/bootstrap.min.js"></script>
<html>
<head>
    <meta charset="utf-8">
    <title>css3下划线跟随文字导航菜单特效</title>

    <style>
        body {
            background: #ededed;
            padding: 0 20px;
            margin: 0;
            font-family: 'Open Sans', Arial, sans-serif;
        }

        h1 {
            text-align: center;
            margin: 80px 0;
        }

        .mynav ul {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            list-style-type: none;
            padding: 0;
        }

        .mynav li:not(:last-child) {
            margin-right: 20px;
        }

        .mynav a {
            display: block;
            font-size: 20px;
            color: black;
            text-decoration: none;
            padding: 7px 15px;
        }

        .target {
            position: absolute;
            border-bottom: 4px solid transparent;
            z-index: -1;
            -webkit-transform: translateX(-60px);
            transform: translateX(-60px);
        }

        .mynav a,
        .target {
            -webkit-transition: all .35s ease-in-out;
            transition: all .35s ease-in-out;
        }
    </style>
</head>
<body>
  

    <script>
                "use strict";

                (function () {

                    var target = document.querySelector(".target");
                    var links = document.querySelectorAll(".mynav a");
                    var colors = ["deepskyblue", "orange", "firebrick", "gold", "magenta", "black", "darkblue"];


                    function mouseenterFunc() {
                        if (!this.parentNode.classList.contains("active")) {
                            for (var i = 0; i < links.length; i++) {
                                if (links[i].parentNode.classList.contains("active")) {

                                    links[i].parentNode.classList.remove("active");

                                }
                                links[i].style.opacity = "0.25";
                            }

                            this.parentNode.classList.add("active");
                            this.style.opacity = "1";

                            var width = this.getBoundingClientRect().width;
                            var height = this.getBoundingClientRect().height;
                            var left = this.getBoundingClientRect().left + window.pageXOffset;
                            var top = this.getBoundingClientRect().top + window.pageYOffset;
                            var color = colors[Math.floor(Math.random() * colors.length)];

                            target.style.width = width + "px";
                            target.style.height = height + "px";
                            target.style.left = left + "px";
                            target.style.top = top + "px";
                            target.style.borderColor = color;
                            target.style.transform = "none";
                        }
                    }

                    for (var i = 0; i < links.length; i++) {
                        links[i].addEventListener("click", function (e) {

                            return e.preventDefault();

                        });

                        links[i].addEventListener("mouseenter", mouseenterFunc);

                    }

                    function resizeFunc() {
                        var active = document.querySelector(".mynav li.active");

                        if (active) {
                            var left = active.getBoundingClientRect().left + window.pageXOffset;
                            var top = active.getBoundingClientRect().top + window.pageYOffset;

                            target.style.left = left + "px";
                            target.style.top = top + "px";

                        }
                    }

                    window.addEventListener("resize", resizeFunc);
                })();
    </script>
    <nav class="mynav">
           <ul>
                <li><a href="/admin/show">主页</a></li>
                <li><a href="#" data-toggle="modal" data-target="#myModal">菜品添加</a></li>
                <li><a href="/admin/ToMenushow">显示今日推荐</a></li>
                <li><a href="/admin/ReMenushow">显示推荐套餐</a></li>
                <li><a href="">显示轮播推荐</a></li>
 
            </ul>

    </nav>
    <nav class="mynav">




        <ul>



            <li><input id="Button1" type="button" value="添加今日推荐" onclick="fun()" /></li>
            <li><input id="Button1" type="button" value="添加推荐套餐" onclick="funre()" /></li>
            <li><input id="Button1" type="button" value="添加到轮播推荐" /></li>



        </ul>
    </nav>
    <span class="target"></span>
    <table class="table table-striped table-hover table-bordered" width="300" height="500">
        <caption>菜单表显示</caption>
        <thead>
            <tr>
                <th onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFcccc'"></th>
                <th onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFcccc'">菜名</th>
                <th onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFcccc'">图片</th>
                <th onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFcccc'">简介</th>
                <th onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFcccc'">价格</th>

            </tr>
        </thead>
        <tbody id="dd">
            @*<tr>
                    <td>Tanmay</td>
                    <td>Bangalore</td>
                    <td>Bangalore</td>
                    <td>Bangalore</td>

                </tr>
                <tr>
                    <td>Sachin</td>
                    <td>Mumbai</td>
                    <td>400003</td>
                    <td>Bangalore</td>
                </tr>
                <tr>
                    <td>Uma</td>
                    <td>Pune</td>
                    <td>411027</td>
                    <td>Bangalore</td>
                </tr>*@




        </tbody>
    </table>


</body>

<!-- 添加今日推荐态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close"
                        data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabel">
                    模态框（Modal）标题

                </h4>
            </div>
            <div class="modal-body">
                添加今日推荐
                <form action="/Home/add">
                    菜品名称：<input id="Text1" type="text" name="name" /><br />
                    图片:<input type="file" />
                    菜品简介:<input id="Text1" type="text" /><br />
                    菜品价格:<input id="Text1" type="text" /><br />
                    <input id="Submit1" type="submit" value="添加" />
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default"
                        data-dismiss="modal">
                    关闭
                </button>
                <button type="button" class="btn btn-primary">
                    添加
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
    </div>

</html>
<script>
    $(function () {

        $.ajax({
            type: "get", //访问WebService使用Post方式请求

            url: "http://localhost:19451/api/ToMenu/GetToshow", //调用WebService

            success: function (response) { //回调函数，result，返回值
                //alert(response)
                var tr = "";

                $(response).each(function (i, item) {

                    tr += "<tr><td>" + item.Toname + "</td><td><img  src='" + item.Tophoto + "' style='width:120px;height:90px;'/></td><td>" + item.Todescrib + "</td><td>" + item.Toprice + "</td></tr>"

                }

)
                $("#dd").append(tr);
            }

        });

    })
  


</script>


